<template>
	<view class="page-layout">
		<view class="page-scroll">
			<scroll-view
				scroll-y
				class="scroll-view articles"
				@scrolltolower="scrolltolower"
				:style="{ height: `calc(100vh - ${topHeight}px)` }"
			>
				<view v-if="dataset && dataset.length">
					<template v-for="(item, index) in dataset" :key="index">
						<navigator
							class="row"
							hover-class="none"
							:url="`/pages/student/find/articles-detail?id=${item.id}`"
						>
							<view class="text">{{ item.title }}</view>
							<view class="dsc">{{ item.content }}</view>
							<image
								class="one"
								:src="setting.oss_pub_domain + item.coverImage"
								v-if="item.images.length == 1"
							/>
							<view class="three" v-else>
								<image :src="setting.oss_pub_domain + val" v-for="(val, key) in item.images" :key="key" />
							</view>
							<view class="user">
								<view class="user_info"></view>
								<view>{{ item.createTime }}</view>
							</view>
						</navigator>
					</template>
				</view>
				<z-no-data v-else></z-no-data>
				<el-load-more v-if="dataset && dataset.length" :loading="loading" :count="pager.count" :length="dataset.length" />
			</scroll-view>
		</view>
	</view>
</template>
<script>
import { getGame } from '@/api/student';
export default {
	data() {
		return {
			loading: false,
			param: { pageSize: 10, pageNum: 0 },
			pager: {},
			dataset: [],
			tags: [],
			topHeight: 0
		};
	},
	mounted() {
		// #ifdef APP-PLUS || H5
		uni.createSelectorQuery()
			.select('.articles')
			.boundingClientRect((data) => {
				this.topHeight = data.top;
			})
			.exec();
		// #endif
		// #ifdef MP-WEIXIN
		const query = wx.createSelectorQuery().in(this);
		query.selectAll('.articles').boundingClientRect();
		query.exec((res) => {
			console.log(res);
			this.topHeight = res[0][0].top;
		});
		// #endif
		this.param.pageNum = 1;
		this.fetchData();
	},
	methods: {
		async fetchData() {
			this.loading = true;
			const { rows, total: count } = await getGame();
			const dataset = rows.map((item) => {
				item.images = item.coverImage.split(',');
				return item;
			});

			this.dataset.push(...dataset);
			this.pager = { count };
			this.loading = false;
		},
		scrolltolower() {
			if (this.pager.count > this.dataset.length) {
				this.param.pageNum++;
				this.fetchData();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.articles {
	height: calc(100vh - 88rpx);
	padding-top: 20rpx;
	background: #ffffff;
	.row {
		width: 688rpx;
		background: #fff5f0 url($static_url + 'bg1.png') no-repeat;
		background-size: 688rpx auto;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 32rpx;
		&:nth-child(2n) {
			background: #e3f2ec url($static_url + 'bg2.png') no-repeat;
			background-size: 688rpx auto;
			border-radius: 20rpx;
		}
		&:nth-child(3n) {
			background: #f9edd3 url($static_url + 'bg3.png') no-repeat;
			background-size: 688rpx auto;
			border-radius: 20rpx;
		}
		.text {
			padding: 32rpx 0 0 30rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1a2233;
		}
		.dsc {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585c66;
			line-height: 44rpx;
			margin: 20rpx 30rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.one {
			width: 628rpx;
			height: 352rpx;
			margin: 0 auto;
			display: block;
			margin-bottom: 40rpx;
			border-radius: 16rpx;
		}
		.three {
			display: flex;
			padding: 0 30rpx;
			margin-bottom: 40rpx;
			justify-content: space-between;
			image {
				width: 196rpx;
				height: 196rpx;
				border-radius: 10rpx;
			}
		}
		.user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #8a8f99;
			padding: 0 30rpx;
			padding-bottom: 32rpx;

			.user_info {
				display: flex;
				align-items: center;
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1a2233;
				}
			}
		}
	}
}
</style>
